<!DOCTYPE html>
<html lang="en">
<title>订单管理</title>
<#import "/layout/layout.html" as body/>
<@body.page>

<style>
    a{
        color: #666;
    }
    .tcdPageCode {
        padding: 15px 20px;
        text-align: left;
        color: #ccc;
    }

    .tcdPageCode a {
        display: inline-block;
        color: #428bca;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        border: 1px solid #ddd;
        margin: 0 2px;
        border-radius: 4px;
        vertical-align: middle;
    }

    .tcdPageCode a:hover {
        text-decoration: none;
        border: 1px solid #428bca;
    }

    .tcdPageCode span.current {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #fff;
        background-color: #428bca;
        border: 1px solid #428bca;
        border-radius: 4px;
        vertical-align: middle;
    }

    .tcdPageCode span.disabled {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #bfbfbf;
        background: #f2f2f2;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        vertical-align: middle;
    }

    .chosen-container {
        min-width: 160px !important;
    }
    .modal-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(0, 0, 0, .5) url("${baseUrl}img/loading.gif") no-repeat center; }
</style>
<div class="wrapper wrapper-content animated fadeIn">
    <div class="tabs-container">
        <ul class="nav nav-tabs" id="order_type">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true" id="tt_class">会员订单</a></li>
        </ul>
        <div class="tab-content">
            <!-- 会员订单start -->
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="wrapper wrapper-content animated fadeInRight">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content">
                                        <form class="form-inline" action="to_order_vip" role="form" id="form" method="post" accept-charset="UTF-8">
                                            
                                            <div class="form-group margin-left">
                                                <label for="tk_tradeId">用户手机号码：</label>
                                                <input class="form-control" id="mobile" name="mobile" type="text" placeholder="" value="${mobile!''}"/>
                                            </div>
                                             <div class="form-group date-rangepicker">
                                                <label for="daterange">日期：</label>
                                                <input class="form-control" id="pay_time" type="text" name="pay_time" value="${pay_time!''}" style="width: 188px"/>
                                            </div>
                                            <div class="form-group margin-left">
												<label for="status">状态：</label> 
												<select class="form-control" id="payStatus" name="payStatus">
													<option value="0" <#if payStatus??&&payStatus == 0>selected="true"</#if> >全部</option>
                                                    <option value="1" <#if payStatus??&&payStatus == 1>selected="true"</#if>>已支付</option>
                                                    <option value="4" <#if payStatus??&&payStatus == 3>selected="true"</#if>>已退款</option>
                                                    <option value="5" <#if payStatus??&&payStatus == 3>selected="true"</#if>>部分退款</option>
												</select>
											</div>
											<div class="form-group margin-left">
												<label for="status">类型：</label> 
												<select class="form-control" id="viptype" name="viptype">
													<option value="0" <#if vipType??&&vipType == 0>selected="true"</#if> >全部</option>
                                                    <option value="1" <#if vipType??&&vipType == 1>selected="true"</#if>>续费</option>
                                                    <option value="2" <#if vipType??&&vipType == 2>selected="true"</#if>>新增</option>
												</select>
											</div>
                                            <button type="button" class="btn btn-outline btn-primary" style="margin-top: 5px" id="but_submit">确认</button>
                                            <!-- <a href="#" download id="hy_export"> -->
                                            	<div class="form-group margin-right" style="">
	                                                <button type="button" class="btn btn-outline excelButton" style="margin-top: 5px" id="hy_export" onclick="tkExport(5)">导出</button>
	                                            </div>
                                            <!-- </a> -->
                                            
											<!-- mode start -->
											<input type="hidden" id="pageNum" name ="pageNum" value="1">
                                        </form>
                                        <hr>
                                        <div class="table-responsive">
                                            <!-- dataTables-example -->
                                            <table class="table table-hover table-center dataTables-example">
                                                <thead>
                                                <tr>
                                                    <th>用户id</th>
                                                    <th>用户昵称</th>
                                                    <th>支付时间</th>
                                                    <th>订单号</th>
                                                    <th>服务类型</th>
                                                    <th>购买月数</th>
                                                    <th>支付金额</th>
                                                    <th>会员有效期</th>
                                                    <th>类型</th>
                                                    <th>状态</th>
                                                    <th>赠送月数</th>
                                                    <th>赠送餐数</th>
                                                    <th>赠送储值卡金额</th>
                                                    <th>支付方式</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <!-- 页面加载的数据  -->
                                                <tbody id="td1">
                                                    <#if list??> <#list list as list>
														<tr>
															<td>${list.userId!}</td>
															<td>
																${list.nickName!}
																<br/>
																${list.mobile!}
															</td>
															<td>
																${list.payTime!''}
															</td>
															<td>
																${list.orderNumber!''}
															</td>
															<td>${list.serviceName!}</td>
															<td>${list.type!}</td>
															<td>${list.amount!}</td>
															<td>${list.vipStartTime!}
																</br>	
																${list.vipEndTime!}	
															</td>
															<td>${list.viptype!}</td>
															<td>${list.payStatus!}</td>
															<td>${list.monthCount!}</td>
															<td>${list.mealCount!}</td>
															<td>${list.accountAmount!}</td>
															<td>${list.payType!}</td>
															<td>
																<button type='button' onclick='toOrderDetail(${list.orderId!})' class='btn btn-default'><i class='fa fa-eye'></i> 查看详情</button>
															</td>
														</tr>
													</#list> </#if>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="ibox-footer overflow" id="tk_dibu">
                                        <h4 class="pull-left margin-left" id="tk_tongji" style="color: #2fb146">订单合计：${totalCount!}笔</h4>
                                        <h4 class="pull-left margin-left" id="tk_feiyong" style="color: #2fb146">费用合计：¥${totalFee!}</h4>
                                        <h4 class="pull-left" id="tk_shifu" style="color: #2fb146">实付合计：¥${totalFee!}</h4>
                                        <div class="pull-right copot-page" id="copot-page"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 团课end -->
            
        </div>
    </div>
</div>

<input type="hidden" id="baseUrl" value="${baseUrl}">
<!-- mode end  -->

<link href="${baseUrl}css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
<script src="${baseUrl}js/main.js"></script>
<script src="${baseUrl}js/plugins/clockpicker/clockpicker.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modal.js"></script>
<script>
   
    $(document).ready(function () {
    	//时间选择
        $('input[name="pay_time"]').daterangepicker({
            startDate: moment().startOf('day'),
            endDate: moment(),
            //minDate: '01/01/2012',    //最小时间
            //maxDate: moment(), //最大时间
            dateLimit: {days: 365}, //起止时间的最大间隔
            showDropdowns: true,
            showWeekNumbers: false, //是否显示第几周
            timePicker: false, //是否显示小时和分钟
            timePickerIncrement: 60, //时间的增量，单位为分钟
            timePicker12Hour: false, //是否使用12小时制来显示时间
            ranges: {
                //'最近1小时': [moment().subtract('hours',1), moment()],
                '今日': [moment().startOf('day'), moment()],
                '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                '最近7日': [moment().subtract('days', 6), moment()],
                '最近30日': [moment().subtract('days', 30), moment()]
            },
            opens: 'right', //日期选择框的弹出位置
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary blue',
            cancelClass: 'btn-small',
            format: 'YYYY-MM-DD', //控件中from和to 显示的日期格式 YYYY-MM-DD HH:mm:ss
            separator: '~',
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        }, function (start, end, label) {//格式化日期显示框
            $('.date-rangepicker span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
        });
    	
    	new Page({
            parent: $("#copot-page"),
            nowPage: ${pageNum!},
            pageSize: 10,
            totalCount: ${totalCount!},
            setting: {
                defaultPage: 7,
                firstPageText: "首页",
                prevPageText: "上一页",
                nextPageText: "下一页",
                lastPageText: "尾页"
            },
            callback: function (nowPage, totalPage) {
            	nowPage = nowPage == 0?1:nowPage;
            	$("#pageNum").val(nowPage);
           	 	$("#form").submit();
            }
        });
    	
        
        $("#but_submit").click(function(){
        	$("#form").submit();
        });

    });
	
 	//教练编辑
    function toOrderDetail(id) {
 		debugger;
        window.location = "${baseUrl}system/order/to_order_bill_detail?orderId=" + id;
    }

</script>

</@body.page>
</html>